<template>
    <transition name="el-fade-in">
        <div class="gw-toast" v-show="visible" role="alert" style="position: fixed;
                    z-index: 99999;
                    top: 50%;
                    color: white;
                    transform: translateY(-50%);">
            <div class="gw-toast-inner" :class="isBig ? 'big-msg' : ''">
                <div class="icon" v-if="isBig && type==='success'">
                    <i class="iconfont icongw-icon-da-chenggong"></i>
                    <!-- <svg t="1648801910894" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4711" width="16" height="16"><path d="M0 512a512 511.616 90 1 0 1023.232 0 512 511.616 90 1 0-1023.232 0Z" fill="#51C41C" p-id="4712"></path><path d="M709.504 371.264a32 32 0 0 1 49.088 40.704l-3.712 4.48-274.304 275.648a32 32 0 0 1-40.832 3.776l-4.48-3.712-182.4-182.592a32 32 0 0 1 40.832-48.896l4.416 3.648 159.68 159.872 251.712-252.928z" fill="#FFFFFF" p-id="4713"></path></svg> -->
                </div>
                <div class="icon" v-else-if="isBig && type==='error' ">
                    <i class="iconfont icongw-icon-da-shibai"></i>
                    <!-- <svg t="1648803276472" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="15518" width="16" height="16"><path d="M512 512m-512 0a512 512 0 1 0 1024 0 512 512 0 1 0-1024 0Z" fill="#FF484B" p-id="15519"></path><path d="M652.8 340.352a31.488 31.488 0 0 1 48.192 40.192l-3.648 4.416-334.208 334.144a31.488 31.488 0 0 1-48.192-40.192l3.648-4.352 334.144-334.208z" fill="#FFFFFF" p-id="15520"></path><path d="M363.52 340.032a32 32 0 0 0-49.024 40.832l3.712 4.416 334.208 334.208a32 32 0 0 0 48.96-40.832l-3.712-4.48L363.52 340.096z" fill="#FFFFFF" p-id="15521"></path></svg> -->
                </div>
                <div class="message">
                    <i class="iconfont icongw-icon-chenggong" v-if="!isBig && type == 'success'"></i>
                    <i class="iconfont icongw-icon-tishi" v-if="!isBig && type == 'warning'"></i>
                    <i class="iconfont icongw-icon-shibai" v-if="!isBig && type == 'error'"></i>
                    <i class="iconfont icongw-icon-tishiyu" v-if="!isBig && (type == 'info' || !type)"></i>
                    {{ message }}
                </div>
            </div>
        </div>
    </transition>
</template>

<script type="text/babel">
export default {
    data () {
        return {
            visible: false,
            message: '',
            duration: 1000,
            type: '',
            customClass: '',
            iconClass: '',
            onClose: null,
            closed: false,
            timer: null,
            isBig: false
        };
    },

    watch: {
        closed (newVal) {
            if (newVal) {
                this.visible = false;
                this.$el.addEventListener('transitionend', this.destroyElement);
            }
        }
    },

    methods: {
        destroyElement () {
            this.$el.removeEventListener('transitionend', this.destroyElement);
            this.$destroy(true);
            this.$el.parentNode.removeChild(this.$el);
        },

        close () {
            this.closed = true;
            if (typeof this.onClose === 'function') {
                this.onClose();
            }
        },

        clearTimer () {
            clearTimeout(this.timer);
        },

        startTimer () {
            if (this.duration > 0) {
                this.timer = setTimeout(() => {
                    if (!this.closed) {
                        this.close();
                    }
                }, this.duration);
            }
        }
    },

    mounted () {
        if (this.duration > 0) {
            this.timer = setTimeout(() => {
                if (!this.closed) {
                    this.close();
                }
            }, this.duration);
        }
    }
};
</script>

<style lang="scss" scoped>
.gw-toast {
    // width: 170px;
    // height: 156px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    left: 0;
    right: 0;
    margin: 0 auto;
    .icon .iconfont {
        font-size: 61px;
        // height: 61px;
    }
}
.gw-toast-inner {
    max-width: 280px;
    background: rgba(0, 0, 0, 0.8);
    padding: 12px;
    border-radius: 6px;
}
.message {
    font-size: 15px;
    display: flex;
    align-items: center;
    .iconfont,
    .el-icon-circle-close {
        margin-right: 8px;
    }
}
.big-msg {
    padding: 25px 55px;
    .icon {
        margin-bottom: 26px;
    }
}
</style>